<template>
  <view class="mr-input" :style="{ 'background-image': 'url(' + EnumBG.BU1 + ')' }">
    {{content}}
  </view>
  <view @click="copy" class="mr-commit mr-commit-cv" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">复制内容</view>
  <view @click="updateStatus" class="mr-commit mr-commit-new" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">重新转换</view>
  <image
        class="h-button-def"
        :class=" sizeStatus ? 'h-button':'h-button-samll'"  
        src="@/static/button/tip.png"
        mode="widthFix"
    ></image>
</template>

<script setup lang="ts">
import {  EnumBG } from "@/utils/content";
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:string
}
const props = withDefaults(defineProps<IProps>(), {})

const emit = defineEmits(['update:defStatus'])
const sizeStatus = ref(false)
const startTimer = () => {
  setInterval(() => {
      sizeStatus.value =  !sizeStatus.value
  }, 1000); // 每秒执行一次
};
const copy = ()=>{
 uni.setClipboardData({
	data: props.content,
	success: function () {
		uni.showToast({
            title:"复制成功"
        })
	}
})
}
const updateStatus = ()=>{
    emit('update:defStatus',EnumStatus.STATUS)
}
onMounted(()=>{
    startTimer()
})
</script>

<style lang="scss" scoped>
.mr-commit{
    z-index: 102;
    position: absolute;
    top: 78%;
    width: 35%;
    height: 110rpx;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
}

.mr-commit-cv{
    left: 10%;
}
.mr-commit-new{
    left: 55%;

}


.h-button-def{
        position: absolute;
        z-index: 99;
        top: 70%;
        height: 140rpx;
        width: 42%;
        left: 57.5%;
    }
    .h-button{
        width: 42%;
        left: 57.5%;
        transition: all 1s;
    }
    .h-button-samll{
        width: 36%;
        left: 60%;
        transition: all 1s;
    }
.mr-input{
    z-index: 102;
    position: absolute;
    top: 50%;
    left: 15%;
    width: 70%;
    height: 150rpx;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bolder;
  
}

</style>
